<script setup lang="ts">
import { ref } from 'vue'
import useImage from '@/composables/login/useImage'
import useBaseLogin from '@/composables/login/useBaseLogin'
import useLogin from '@/composables/login/useLogin'

// 验证码
const { imgSrc, captchaId, getImage } = useImage()

// 基础数据
const { headTitle,
    loginUsername,
    loginPassword,
    loginVerifyCode,
    loginBtn, installBtn, loginModel, loginRules, loginFormRef } = useBaseLogin(captchaId)

const { isCanSubmit, login, install } = useLogin(loginModel)

</script>
<template>
    <div class="login_container">
        <div class="container">
            <h1 ref="headTitle">后台登录</h1>
            <el-form ref="loginFormRef" label-position="top" :model="loginModel" :rules="loginRules">
                <el-form-item ref="loginUsername" class="labels" label prop="username">
                    <el-input v-model="loginModel.username" placeholder="请输入用户名" prefix-icon="user"></el-input>
                </el-form-item>
                <el-form-item ref="loginPassword" class="labels" label prop="password">
                    <el-input v-model="loginModel.password" placeholder="请输入密码" prefix-icon="lock" show-password>
                    </el-input>
                </el-form-item>
                <el-form-item ref="loginVerifyCode" class="labels" label prop="verify_code">
                    <el-row :gutter="20">
                        <el-col :span="16">
                            <el-input placeholder="请输入验证码" v-model="loginModel.verify_code"></el-input>
                        </el-col>
                        <el-col :span="8">
                            <img class="captcha" :src="imgSrc" @click="getImage" />
                            <input type="hidden" v-model="loginModel.captcha_id" />
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item ref="loginBtn">
                    <el-button :disabled="!isCanSubmit" type="primary" @click="login">登录</el-button>
                </el-form-item>
                <el-form-item ref="installBtn">
                    <el-button type="default" @click="install">安装</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<style lang="scss" scoped>

</style>
